<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '预约历史',
  },
}
</route>

<template>
  <view>
    <uv-list>
      <uv-list-item direction="column" v-for="item in recordList" :key="item.id">
        <template #header>
          <uv-text :text="`订单编号：${item.id}`"></uv-text>
        </template>
        <template #body>
          <uv-text :text="`场地编号：${item.venueCode}`"></uv-text>
          <uv-text :text="`场地名称：${item.venueName}`"></uv-text>
          <uv-text :text="`开始时间：${item.startedAt}`"></uv-text>
          <uv-text :text="`结束时间：${item.endedAt}`"></uv-text>
        </template>
        <template #footer>
          <view flex w-8.5em>
            <uv-text text="场地状态："></uv-text>
            <view flex inline>
              <uv-tags :text="statusText[Number(item.status)]" type="primary"></uv-tags>
            </view>
          </view>
        </template>
      </uv-list-item>
    </uv-list>
  </view>
</template>

<script setup lang="ts">
import { PageQry } from '@/typings'
import { getHistory } from '@/service/reservation/reservation'
import type { ReservationOrderRespVO } from '@/service/reservation/type'

const page = ref<PageQry>()
const recordList = ref<Array<ReservationOrderRespVO>>([
  {
    id: '',
    venueId: '',
    venueCode: 'string',
    venueName: 'string',
    price: -1,
    count: -1,
    total: -1,
    startedAt: 'Date',
    endedAt: 'Date',
    status: -1,
  },
])
const loadData = async () => {
  const resData = await getHistory(page.value)
  recordList.value = resData.data.records
}
const statusText = ref<string[]>(['待支付', '待使用', '已取消', '使用中', '已使用', '已过期'])
onLoad(() => {
  loadData()
})
</script>

<style scoped lang="scss"></style>
